<div class="view">
	<div class="toolbar">
		<div class="toolbar-title">
			Add Service
		</div>
		<a ui-sref="services" class="btn btn-default">Back to List</a>
	</div>
	<form name="serviceForm" ng-model="service">
		<div class="form-summary-pannel col-lg-3">
			<div class="form-summary-title"><span>Summary</span></div>
			<ul class="form-summary-content">
				<li class="form-summary-item row">
					<label  class="col-lg-6">Type:</label>
					<span ng-bind="service.serviceTypeId | serviceTypesFilter:'serviceTypeName'"></span>
				</li>
				<li class="form-summary-item row">
					<label  class="col-lg-6">Name:</label>
					<span ng-bind="service.serviceName"></span>
				</li>
				<li class="form-summary-item row">
					<label class="col-lg-6">Description:</label>
					<span></span>
				</li>
				<li class="form-summary-item row">
					<label class="col-lg-6">Cluster:</label>
					<span></span>
				</li>
				<li class="form-summary-item row">
					<label class="col-lg-6">Instance:</label>
					<span></span>
				</li>
				<li class="form-summary-item row">
					<label class="col-lg-6">Port:</label>
					<span></span>
				</li>
				<li class="form-summary-item row">
					<label class="col-lg-6">Auto Start Service:</label>
					<span></span>
				</li>
				<li class="form-summary-action-panel">
					<a href="" class="btn btn-primary" ng-click="deploy()">Deploy</a>
				</li>
			</ul>
		</div>

		<div class="col-lg-8">	

			<!-- Service Basic information -->
			<div class="form-panel">
				<div class="form-title"><span>Basic</span></div>
				<div class="form-content">
					<div class="form-item row">
						<label class="col-lg-4">Service Type</label>
						<select class="col-lg-8" ng-model="service.serviceTypeId" required>
							<option value="">Select...</option>
							<option ng-repeat="stype in serviceTypes" value="{{stype.serviceTypeId}}">{{stype.serviceTypeName}}</option>
						</select>
					</div>
					<div class="form-item row">
						<label for="serviceName" class="col-lg-4">Service Name</label>
						<input type="text" class="col-lg-8" ng-model="service.serviceName" required>
					</div>
					<div class="form-item row">
						<label for="serviceDesr" class="col-lg-4">Service Description</label>
						<input type="text" class="col-lg-8">
					</div>
				</div>
			</div>

			<!-- Deploy information -->
			<div class="form-panel">
				<div class="form-title"><span>Deploy</span></div>
				<div class="form-content">
					<div class="form-item row">
						<label class="col-lg-4">Cluster</label>
						<select class="col-lg-8" ng-model="service.rpumClusterId">
							<option value="">Select...</option>
							<option value="1">Beijing</option>
						</select>
					</div>
					<div class="form-item row">
						<label class="col-lg-4">Instance</label>
						<select class="col-lg-8" ng-model="service.nodeId">
							<option value="">Select...</option>
							<option value="1">Beijing</option>
						</select>
					</div>
					<div class="form-item row">
						<label class="col-lg-4">Auto assign port</label>
						<div class="col-lg-8">
							<input type="checkbox" ng-model="service.autoScanPort">
							<span >RMCloud will auto assign a port for this service.</span>
						</div>
					</div>
					<div class="form-item row">
						<label class="col-lg-4">Port</label>
						<input type="text" class="col-lg-8" ng-model="service.port">
					</div>
					<div class="form-item row">
						<label class="col-lg-4">Auto Start Service</label>
						<div class="col-lg-8">
							<input type="checkbox" ng-model="service.autoStartAfterDeployment">
							<span>RMCloud will auto start service after you finish deployment.</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	</form>
</div>